import React, { Component } from 'react'

export default class State extends Component {
  // 构造函数
  // constructor(props) {
  //   // 调用了父类的函数
  //   super(props)

  //   this.state = {
  //     isShow: true
  //   }
  // }

  // state属性
  state = {
    isShow: true,
    count: 0,
    list1: [<li key="a">a</li>, <li key="b">b</li>, <li key="c">c</li>],
    list: ['a', 'b', 'c']
    // list: []
  }

  render() {
    return (
      <div>
        {/* {
          this.state.isShow ? <div> state </div> : null
        } */}
        {
          this.state.isShow && <div> state </div>
        }
        {/* state: { JSON.stringify(this.state.isShow) } */}

        count: { this.state.count }

        <ul>
          {
            this.state.list.map( value => {
              return (
                <li key={value}>{ value }</li>
              )
            })
          }
          {/* { this.state.list1 } */}
          {/* { this.state.list } */}
        </ul>
      </div>
    )
  }

  componentDidMount() {

    // this.setState({
    //   list: ['a', 'b', 'c']
    // })
    this.state.list.push('d')
    this.setState({}) // merge

    // this.forceUpdate() // out should

    // setTimeout(() => {
    //   // 不正式写法
    //   // this.state.isShow = !this.state.isShow
    //   // this.setState({})

    //   // this.setState({
    //   //   isShow: !this.state.isShow
    //   // })

     //   // this.setState({
    //   //   isShow: false
    //   // })

    //   this.setState(prevState => {
    //     return {
    //       isShow: !prevState.isShow
    //     }
    //   })
    // }, 3000)
    // setInterval(() => {
    //   this.setState(prevState => {
    //     return {
    //       count: prevState.count + 1
    //     }
    //   })
    //   console.log(document.querySelector('#root').innerHTML)
    // }, 3000)

    this.setState(prevState => {
      return {
        count: prevState.count + 1
      }
    }, () => { // dom 渲染后进行操作
      console.log(document.querySelector('#root').innerHTML)
    })
    console.log(document.querySelector('#root').innerHTML)
  }
}
